<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transition</title>
	<style>
		*{margin:0; padding:0;}
		html,body{ width: 100%;}
		.typeTransition1-transition{
			height: 150px;
			width: 150px;
			transition: all .3s ease;
			background-color: #ccc;
			opacity: 1; 
			overflow: hidden;
		}
		.typeTransition2-transition{
			height: 150px;
			width: 150px;
			transition: all .3s ease;
			background-color: red;
			opacity: 1; 
			overflow: hidden;
		}
		.typeTransition1-enter, .typeTransition1-leave {
			width: 0px;
			opacity: 0px;
			transition: all .3s ease;
			opacity: 0;			
		}
		.typeTransition2-enter,.typeTransition2-leave{
		 	height: 0px;
		    transition: all .3s ease;
			opacity: 0;	
		}
	</style>
</head>
<body>
	<!--
	 <div id="demo" class="demo">
	 	 <button v-on:click="showHide">显示隐藏</button>
	 	 {{show}}
	 	 <div v-if="show"  transition="expand">hello</div>
	 </div>
	 -->
	 <div id="demo" class="demo">
	 	 <button v-on:click="showHide">显示隐藏</button>
	 	 {{show}}
	 	 <div v-if="show"  :transition="transitionName">hello</div>
	 </div
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
 /** (function(){
    	var vm = new Vue({
			el: "#demo",
			data:{
			  show:false
			},
			methods:{
				showHide:function(){
					this.show=!this.show;
				}
			}
		})
   })();*/
   (function(){
   	/*动态绑定自定义过渡*/
   	 var vm = new Vue({
   	 
   	 	el: "#demo",
   	 	data:{
   	 		show:false,
   	 		transitionName:'typeTransition1',
   	 		i:1
   	 	},
   	 	methods:{
   	 		showHide:function(){
				this.show=!this.show;
				this.i == 2 ? this.i=1 : this.i=2
				 console.log(this.i);
				this.transitionName = 'typeTransition'+this.i;
				 console.log('typeTransition'+this.i);
			}
   	 	}
   	 
   	 });
   	 /*javascript 钩子*/
   })()
</script>
</html>